<template>
  <el-popover
    style="width: 100%"
    popper-class="pop_box"
    width="450"
    trigger="click"
    :ref="'popover'"
  >
    <DataView
      :title="title"
      :objKey="objKey"
      @changeRadio="changeRadio"
      id="id"
      :list="items"
      :valueType="valueType"
    ></DataView>
    <el-input
      @focus="changeInputValue"
      slot="reference"
      :key="keys"
      @input="input"
      :value="value"
      size="small"
    >
      <template slot="prepend" v-if="prepend">值</template>
    </el-input>
  </el-popover>
</template>

<script>
import DataView from "@/components/FunctionDrawer/DataView";
import { mapGetters } from "vuex";
import _ from "lodash";
export default {
  components: {
    DataView,
  },
  props: {
    prepend: {
      type: Boolean,
      default: false,
    },
    value: {
      default: "",
    },
    title: {
      default: "过滤",
    },
    valueType: {
      default: "valueType",
    },
    row: {
      type: Object,
      default: () => {},
    },
    keys: {
      type: [Number, String],
      default: "",
    },
    objKey: {
      type: String,
      default: "funArr",
    },
  },
  computed: {
    ...mapGetters(["extensions"]),
    items() {
      var _search = this.value;
      // 深拷贝-不然过滤之后下次在过滤拿的是上一次过滤之后的数据
      let newArr = _.cloneDeep(this.extensions[this.objKey]);
      if (_search) {
        newArr &&
          newArr.forEach((item) => {
            item.list = _.filter(item.list, function (o) {
              // return o.valueType.indexOf(_search) != -1;
              let val = o.valueType ? o.valueType : o.value;
              val = val || o.name;
              return val.toLowerCase().indexOf(_search.toLowerCase()) != -1;
            });
          });
      }

      return newArr;
    },
  },

  methods: {
    changeInputValue() {
      this.$emit("changeInputValue");
    },
    // 手动控制pop显示隐藏-如果内容为空就隐藏 (解决bug-多次点击隐藏之后,在输入内容不会显示)
    inputShowPop(row, index) {},
    changeRadio(row) {
      this.$refs["popover"].doClose();
      this.$emit("input", row.valueType, row);
      this.$emit("changeRadio", row);
    },
    input($event) {
      this.$emit("input", $event);
      this.$nextTick(() => {
        if (this.items && !this.items.every((item) => item.list.length === 0)) {
          this.$refs["popover"].doShow();
        } else {
          this.$refs["popover"].doClose();
        }
      });
      //   this.$emit("input", event.target.value);
    },
  },
};
</script>

<style scoped lang='scss'>
/deep/ .spot_point {
  top: 20px !important;
}
</style>